import {useState} from "react";
import {Input, View, Button, Textarea, Picker} from "@tarojs/components";
import Taro, {useLoad} from '@tarojs/taro'
import './index.scss'
import {postRequest} from "../../util/request";


export default function Index() {

  const [promoter, setPromoter] = useState('');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [place, setPlace] = useState('');
  const [title, setTitle] = useState('');
  const [expectedPersonCount, setExpectedPersonCount] = useState('');
  const [budget, setBudget] = useState('');
  const [remark, setRemark] = useState('');

  useLoad((param) => {
    console.log('发起训练表单页面加载', param)
    setPromoter(param.promoter)
  })

  const save = () => {
    if(!promoter || !startDate || !endDate || !place || !title || !expectedPersonCount || !budget || !remark){
      Taro.showToast({title: '请完整填写信息', icon: 'none'})
      return
    }
    postRequest('/bsOrgTrain/add', {
      promoter,
      startDate,
      endDate,
      place,
      title,
      expectedPersonCount,
      budget,
      remark,
      cover: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c',
      organizerName: promoter
    }, (res) => {
      if (res.success) {
        Taro.showToast({title: '保存成功', icon: 'none'})
        setTimeout(() => {
          Taro.navigateBack()
        }, 1500)
      } else {
        Taro.showToast({title: res.message, icon: 'none'})
      }
    })
  };

  return (
    <View className='login-page'>
      <View className='input-container'>
        <Input
          type='text'
          placeholder='发起人'
          value={promoter}
          onInput={e => setPromoter(e.detail.value)}
          className='login-input'
          disabled
        />
        <Picker mode='date' className='login-input' onChange={e => setStartDate(e.detail.value)}>
          <View className='picker'>
            <Input
              type='text'
              placeholder='选择开始日期'
              value={startDate}
              style={{marginTop: '10rpx'}}
              disabled
            />
          </View>
        </Picker>
        <Picker mode='date' className='login-input' onChange={e => setEndDate(e.detail.value)}>
          <View className='picker'>
            <Input
              type='text'
              placeholder='选择结束日期'
              value={endDate}
              style={{marginTop: '10rpx'}}
              disabled
            />
          </View>
        </Picker>
        <Input
          type='text'
          placeholder='培训地点'
          value={place}
          onInput={e => setPlace(e.detail.value)}
          className='login-input'
        />
        <Input
          type='text'
          placeholder='培训主题'
          value={title}
          onInput={e => setTitle(e.detail.value)}
          className='login-input'
        />
        <Input
          type='text'
          placeholder='预计人数'
          value={expectedPersonCount}
          onInput={e => setExpectedPersonCount(e.detail.value)}
          className='login-input'
        />
        <Input
          type='text'
          placeholder='人均预算'
          value={budget}
          onInput={e => setBudget(e.detail.value)}
          className='login-input'
        />
        <Textarea
          placeholder='备注说明'
          value={remark}
          onInput={e => setRemark(e.detail.value)}
          style='background:#fff;width:100%;min-height:80px;box-sizing: border-box;
          padding: 10px;border: 1px solid #ccc;border-radius: 10px;' autoHeight
        />
      </View>
      <Button className='login-button' onClick={save}>提 交</Button>
    </View>
  )
}
